class MyForm extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });

    const form = document.createElement('div');

    // 获取自定义标签的属性值
    const text1 = this.getAttribute('text1');
    const text2 = this.getAttribute('text2');
    const button = this.hasAttribute('button');
    const click = this.getAttribute('buttonclick');

    // 根据属性值动态生成表单元素
    if (text1) {
      const label = document.createElement('label');
      label.textContent = 'Text 1:';
      const input = document.createElement('input');
      input.type = 'text';
      input.name = 'text1';
      input.value = text1;
      form.appendChild(label);
      form.appendChild(input);
    }

    if (text2) {
      const label = document.createElement('label');
      label.textContent = 'Text 2:';
      const input = document.createElement('input');
      input.type = 'text';
      input.name = 'text2';
      input.value = text2;
      form.appendChild(label);
      form.appendChild(input);
    }

    if (button) {
      const button = document.createElement('button');
      button.type = 'button';
      button.textContent = 'Submit';
      button.onclick = function (){
          if(click){
            eval(click)
          }
      }
      form.appendChild(button);
    }

    shadow.appendChild(form);

    const style = document.createElement('style');
    style.textContent = `
      form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      label {
        font-weight: bold;
      }

      input, button {
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: 0.25rem;
      }

      button {
        background-color: #007bff;
        color: #fff;
        cursor: pointer;
      }
    `;

    shadow.appendChild(style);
  }
}

customElements.define('my-form', MyForm);